<template>
  <div class="zy-menu">
    <el-menu
        ref="ul_width"
        :collapse="isCollapse"
        :uniqueOpened="uniqueOpened"
        :default-openeds="openedsList"
    >
      <div v-for="(menu,index) in menuList" :key="index">
        <el-submenu :key="index" :index="menu.index" v-if="menu.list && menu.list.length">
          <template slot="title">
            <!--        <img class="zy-iconfont" :src="svgHandle(menu.icon_class)" v-if="iconList.indexOf(menu.icon_class) !== -1">-->
            <!--        <span class="zy-iconfont" :class="'zy-' + menu.icon_class" v-else></span>-->
            <i :class="menu.icon_class"></i>
            <span>{{menu.title}}</span>
          </template>
          <el-menu-item v-for="(subMenu,subIndex) in menu.list"
                        :key="subIndex"
                        :class="{active: $route.path === subMenu.route}"
                        @click.native="menuClick(subMenu)">
            {{subMenu.title}}
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="0" v-else-if="menu.route == '/'" @click.native="menuClick(menu)"
                      :class="{active: $route.path === menu.route}">
          <i :class="menu.icon_class" class="zy-iconfont zy-shouye"></i>
          <span>{{menu.title}}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
	export default {
		name: "zyMenu",
		props: {
			openedsList: {
				type: Array,
				default: () => []
			},
			menuList: {
				type: Array,
				default: () => []
			},
			isCollapse: {
				type: Boolean,
				default: () => false
			},
			currentPath: {
				type: String,
				default: () => ''
			},
			disabledMenuList: {
				type: Array,
				default: () => []
			},
			uniqueOpened: {
				type: Boolean,
				default: () => true
			},
		},
		data() {
			return {
				// iconList: ['open', 'agent', 'enterprise']    // iconfont 无法正常处理的svg特殊处理  by zengfan 2021/07/26
			};
		},
		computed: {},
		watch: {
			disabledMenuList(newVal) {
				this.handleMenu(newVal)
			}
		},
		components: {},
		methods: {
			handleClose(key) {
				let list = this.openedsList || [];
				list.forEach((v, k) => {
					if (v == key) {
						list.splice(k, 1)
					}
				});
				this.openedsList = [];
			},
			menuClick(menuInfo) {
				this.$emit('menuChange', menuInfo);
			},
			handleMenu(disabledMenuList) {
				this.menuList.forEach(menu => {
					if (menu.list && menu.list.length) {
						for (let i = menu.list.length - 1; i >= 0; i--) {
							if (disabledMenuList.indexOf(menu.list[i].route) !== -1) {
								menu.list.splice(i, 1);
							}
						}
					}
				});
			},
			// svgHandle(name){
			//   return require(`@/assets/svg/${name}.svg`)
			// }
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/menu/menu.less">

</style>
